<template>
  <div>
    <h2>Todolist</h2>
    <Search @add="addFn" @search="searchFn" />
    <br>
    <CheckBox title="全选" :checked="allCheck" @setCheck="setAllCheckFn" />
    <ul>
      <!-- 利用插槽技术，将Item组件改造成容器组件 -->
      <Item v-for="item in nList" :key="item.id" :iId="item.id" @del="delFn">
        <template #checkbox>
          <CheckBox :checked="item.checked" :iId="item.id" @setCheck="setCheckFn"/>
        </template>
        <template #writeSpan>
          <WriteSpan :title="item.title" :isSet="item.isSet" />
        </template>
      </Item>
    </ul>
  </div>
</template>

<script>
import Search from "./Search.vue";
import CheckBox from "./CheckBox.vue";
import WriteSpan from "./WriteSpan.vue";
import Item from "./Item.vue";

export default {
  components:{
    Search, CheckBox, Item, WriteSpan
  },
  data(){
    return {
      list:[],
      nList:[],
      txt:""
    }
  },
  methods:{
    // 该方法被子组件触发，可以获取到子组件的输入框数据
    addFn(val){
      // 执行添加功能
      this.list.push({
        id: Math.random()+""+Date.now(),
        title: val,
        checked: false,
        isSet: false
      })
      this.nList = this.list;
    },
    // 该方法被子组件触发，可以获取到子组件的id数据
    delFn(id){
      // 根据id执行删除功能
      this.list.splice(this.getIndex(id), 1);
      this.nList = this.list;
    },
    // 该方法被子组件触发，可以获取到子组件的搜索数据
    searchFn(s){
      // 根据搜索关键字执行搜索功能
      this.nList = this.list.filter(val=>val.title.includes(s));
    },
    // 该方法被子组件触发，可以获取到子组件的选中状态
    setAllCheckFn(c){
      // 根据子组件的选中状态，修改所有数据的选中状态（全选影响单个）
      this.list.forEach(val=>val.checked=c);
      this.nList = this.list;
    },
    // 该方法被子组件触发，可以获取到子组件的选中状态和id
    setCheckFn(c, id){
      // 根据id修改对应数据的选中状态（用于提供计算全选状态）
      this.list[this.getIndex(id)].checked = c;
      this.nList = this.list;
    },
    // 工具方法，用于根据id获取数据的索引
    getIndex(id){
      let i=0;
      this.list.some((val,idx)=>{
        i = idx;
        return val.id === id;
      });
      return i;
    }
  },
  computed:{
    allCheck(){
      // 用于计算全选的选中状态
      return this.nList.every(val=>val.checked);
    }
  }
}
</script>